<template>
    <Header />
    <div class="myCoupon hidden-xs-only">
        <titleBar title="我的优惠券"  style="margin-top: 30px;"/>
        <div class="cotent mb10" v-for="(item,index) in 3" :key="index">
            <div class="coupon-item flex-between mt30 ">
                <div class="flex-center">
                        <div class="mr10">
                            <img src="../assets/svgs/coupon.svg" alt=""></div>
                    <div>
                        <div class="couponName">
                            1000满减100
                        
                        </div>
                        <div class="couponExplain">
                            仅限于上海世博会期间预订酒店
                        </div>
                    </div>
                </div>
                <div class="couponTime">
                    有效期至2024-03-30 00：00：0021
                </div>
            </div>
            <div class="couponDetail">
                <div class="mb10 ml10">
                    <span class="bold ">活动时间：</span>即日起至2024年底。
                </div>
                <div class="ml10">
                    <span class="bold">优惠内容：</span>凡在结账时消费满1000元人民币，即可享受立减100元人民币的优惠。
                </div>
            </div>
        </div>
    </div>

    <!-- 手机版 -->
    <div class="myCoupon-phone fz14 hidden-sm-and-up">
        <titleBar title="我的优惠券" />
        <div class="cotent mb10" v-for="(item,index) in 3" :key="index">
            <div class="coupon-item mt30 ">
                <div class="couponName-container">
                        <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" fill="none" version="1.1" width="43" height="43" viewBox="0 0 43 43"><defs><clipPath id="master_svg0_278_02122"><rect x="0" y="0" width="43" height="43" rx="0"/></clipPath></defs><g clip-path="url(#master_svg0_278_02122)"><g><path d="M5.1096819531249995,19.6545Q5.840821953124999,20.679299999999998,5.840821953124999,21.9479Q5.840821953124999,23.2165,5.1096819531249995,24.2413Q4.394344953125,25.2439,3.247552953125,25.6526Q3.175087953125,25.6785,3.107425953125,25.7151Q3.039762953125,25.7517,2.978495953125,25.7982Q2.917228953125,25.8447,2.863797953125,25.9001Q2.810367953125,25.9554,2.766030953125,26.0183Q2.721694953125,26.0812,2.687495953125,26.1501Q2.653297953125,26.219,2.630041953125,26.2923Q2.606784953125,26.3656,2.595018953125,26.4417Q2.583251953125,26.5177,2.583251953125,26.5946L2.583251953125,35.8333Q2.583251953125,35.931799999999996,2.602466953125,36.028400000000005Q2.621681953125,36.125,2.659372953125,36.216Q2.6970639531250002,36.307,2.751781953125,36.3889Q2.806500953125,36.4708,2.876144953125,36.540400000000005Q2.945788953125,36.6101,3.027681953125,36.6648Q3.109573953125,36.7195,3.200568953125,36.7572Q3.291562953125,36.7949,3.388161953125,36.814099999999996Q3.484760553125,36.8333,3.583251953125,36.8333L39.416551953125,36.8333Q39.515051953125,36.8333,39.611651953125,36.814099999999996Q39.708251953125,36.7949,39.799251953125,36.7572Q39.890251953125,36.7195,39.972151953125,36.6648Q40.054051953125,36.6101,40.123651953125,36.540400000000005Q40.193351953125,36.4708,40.248051953125,36.3889Q40.302751953125,36.307,40.340451953125,36.216Q40.378151953125,36.125,40.397351953125,36.028400000000005Q40.416551953125,35.931799999999996,40.416551953125,35.8333L40.416551953125,26.5946Q40.416551953125,26.5177,40.404851953125,26.4417Q40.393051953125,26.3656,40.369751953125,26.2923Q40.346551953125,26.219,40.312351953125,26.1501Q40.278151953125,26.0811,40.233851953125,26.0183Q40.189451953125,25.9554,40.136051953125,25.9001Q40.082651953125,25.8447,40.021351953125,25.7982Q39.960051953125,25.7517,39.892451953125,25.7151Q39.824751953125,25.6785,39.752251953125,25.6526Q38.605451953125,25.2439,37.890151953125,24.2413Q37.158951953125,23.2165,37.158951953125,21.9479Q37.158951953125,20.679299999999998,37.890151953125,19.6545Q38.605451953125,18.651899999999998,39.752251953125,18.2432Q39.824751953125,18.217399999999998,39.892451953125,18.180799999999998Q39.960051953125,18.144199999999998,40.021351953125,18.0976Q40.082651953125,18.05111,40.136051953125,17.99577Q40.189451953125,17.94042,40.233851953125,17.87755Q40.278151953125,17.81468,40.312351953125,17.74577Q40.346551953125,17.676859999999998,40.369751953125,17.60353Q40.393051953125,17.5302,40.404851953125,17.45418Q40.416551953125,17.37816,40.416551953125,17.30123L40.416551953125,8.0625Q40.416551953125,7.9640086,40.397351953125,7.86741Q40.378151953125,7.770811,40.340451953125,7.679817Q40.302751953125,7.588822,40.248051953125,7.50693Q40.193351953125,7.425037,40.123651953125,7.355393Q40.054051953125,7.285749,39.972151953125,7.23103Q39.890251953125,7.176312,39.799251953125,7.138621Q39.708251953125,7.10093,39.611651953125,7.081715Q39.515051953125,7.0625,39.416551953125,7.0625L3.583251953125,7.0625Q3.484760553125,7.0625,3.388161953125,7.081715Q3.291562953125,7.10093,3.200568953125,7.138621Q3.109573953125,7.176312,3.027681953125,7.23103Q2.945788953125,7.285749,2.876144953125,7.355393Q2.806500953125,7.425037,2.751781953125,7.50693Q2.6970639531250002,7.588822,2.659372953125,7.679817Q2.621681953125,7.770811,2.602466953125,7.86741Q2.583251953125,7.9640086,2.583251953125,8.0625L2.583251953125,17.30123Q2.583251953125,17.37816,2.595018953125,17.45418Q2.606784953125,17.53021,2.630040953125,17.60353Q2.653297953125,17.676859999999998,2.687495953125,17.74578Q2.721694953125,17.81469,2.766030953125,17.87755Q2.810367953125,17.94042,2.863797953125,17.99577Q2.917228953125,18.051119999999997,2.978495953125,18.0976Q3.039762953125,18.144199999999998,3.107425953125,18.180799999999998Q3.175087953125,18.217399999999998,3.247552953125,18.2432Q4.394346953125,18.651899999999998,5.1096819531249995,19.6545ZM6.737781953124999,25.4029Q7.840821953125,23.8568,7.840821953125,21.9479Q7.840821953125,20.039,6.737781953124999,18.4929Q5.871991953125001,17.279420000000002,4.583251953125,16.6405L4.583251953125,9.0625L38.416551953125,9.0625L38.416551953125,16.6405Q37.127851953125,17.279420000000002,36.262051953125,18.4929Q35.158951953125,20.039,35.158951953125,21.9479Q35.158951953125,23.8568,36.262051953125,25.4029Q37.127851953125,26.6164,38.416551953125,27.2553L38.416551953125,34.8333L4.583251953125,34.8333L4.583251953125,27.2553Q5.871991953125001,26.6164,6.737781953124999,25.4029Z" fill-rule="evenodd" fill="#FFFFFF" fill-opacity="1"/></g><g><path d="M17.727977953125,13.626355505859376L21.499921953125,17.398293505859375L25.271601953125,13.626611505859374L25.271981953125,13.626236505859374Q25.412631953125,13.485584505859375,25.596401953125,13.409464505859376Q25.780171953125,13.333343505859375,25.979081953125,13.333343505859375Q26.077571953125002,13.333343505859375,26.174171953125,13.352558505859374Q26.270771953125,13.371773505859375,26.361761953125,13.409464505859376Q26.452761953125,13.447155505859374,26.534651953125,13.501873505859376Q26.616541953125,13.556592505859374,26.686191953125,13.626236505859374Q26.755831953125,13.695880505859375,26.810551953125,13.777773505859376Q26.865271953125,13.859665505859375,26.902961953125,13.950660505859375Q26.940651953125,14.041654505859375,26.959871953125003,14.138253505859375Q26.979081953125,14.234852105859375,26.979081953125,14.333343505859375Q26.979081953125,14.532255505859375,26.902961953125,14.716026505859375Q26.826841953124998,14.899798505859374,26.686191953125,15.040450505859376L26.685811953125,15.040825505859376L22.207021953125,19.519613505859375Q22.066371953125,19.660273505859376,21.882601953125,19.736393505859375Q21.698831953125,19.812513505859375,21.499921953125,19.812513505859375Q21.301001953125,19.812513505859375,21.117231953125,19.736393505859375Q20.933461953125,19.660273505859376,20.792811953125,19.519613505859375L16.313644953125,15.040450505859376Q16.172992953125,14.899798505859374,16.096871953125,14.716026505859375Q16.020751953125,14.532255505859375,16.020751953125,14.333343505859375Q16.020751953125,14.234852105859375,16.039966953125,14.138253505859375Q16.059181953124998,14.041654505859375,16.096872953125,13.950660505859375Q16.134563953125,13.859665505859375,16.189281953125,13.777773505859376Q16.244000953125,13.695880505859375,16.313644953125,13.626236505859374Q16.383288953125,13.556592505859374,16.465181953125,13.501873505859376Q16.547073953125,13.447155505859374,16.638068953125,13.409464505859376Q16.729062953125,13.371773505859375,16.825661953125,13.352558505859374Q16.922260553125,13.333343505859375,17.020751953125,13.333343505859375Q17.219663953125,13.333343505859375,17.403434953125,13.409463505859375Q17.587206953125,13.485584505859375,17.727858953125,13.626236505859374L17.727977953125,13.626355505859376Z" fill-rule="evenodd" fill="#FFFFFF" fill-opacity="1"/></g><g><path d="M16.125,18.708343505859375L26.875,18.708343505859375Q26.9735,18.708343505859375,27.0701,18.727558505859374Q27.1667,18.746773505859373,27.2577,18.784464505859376Q27.3487,18.822155505859374,27.4306,18.876873505859376Q27.5125,18.931592505859374,27.5821,19.001236505859374Q27.651699999999998,19.070880505859375,27.7065,19.152773505859376Q27.761200000000002,19.234665505859375,27.7989,19.325660505859375Q27.8366,19.416654505859373,27.855800000000002,19.513253505859375Q27.875,19.609852105859375,27.875,19.708343505859375Q27.875,19.806834905859375,27.855800000000002,19.903433505859375Q27.8366,20.000032505859377,27.7989,20.091026505859375Q27.761200000000002,20.182021505859375,27.7065,20.263913505859374Q27.651699999999998,20.345806505859375,27.5821,20.415450505859376Q27.5125,20.485094505859376,27.4306,20.539813505859374Q27.3487,20.594531505859376,27.2577,20.632222505859374Q27.1667,20.669913505859377,27.0701,20.689128505859376Q26.9735,20.708343505859375,26.875,20.708343505859375L16.125,20.708343505859375Q16.0265086,20.708343505859375,15.92991,20.689128505859376Q15.833311,20.669913505859377,15.742317,20.632222505859374Q15.651322,20.594531505859376,15.56943,20.539813505859374Q15.487537,20.485094505859376,15.417893,20.415450505859376Q15.348249,20.345806505859375,15.29353,20.263913505859374Q15.238812,20.182021505859375,15.201121,20.091026505859375Q15.16343,20.000032505859377,15.144214999999999,19.903433505859375Q15.125,19.806834905859375,15.125,19.708343505859375Q15.125,19.609852105859375,15.144214999999999,19.513253505859375Q15.16343,19.416654505859373,15.201121,19.325660505859375Q15.238812,19.234665505859375,15.29353,19.152773505859376Q15.348249,19.070880505859375,15.417893,19.001236505859374Q15.487537,18.931592505859374,15.56943,18.876873505859376Q15.651322,18.822155505859374,15.742317,18.784464505859376Q15.833311,18.746773505859373,15.92991,18.727558505859374Q16.0265086,18.708343505859375,16.125,18.708343505859375Z" fill-rule="evenodd" fill="#FFFFFF" fill-opacity="1"/></g><g><path d="M16.125,24.232666015625L26.875,24.232666015625Q26.9735,24.232666015625,27.0701,24.251881015625Q27.1667,24.271096015624998,27.2577,24.308787015625Q27.3487,24.346478015625,27.4306,24.401196015625Q27.5125,24.455915015625,27.5821,24.525559015625Q27.651699999999998,24.595203015625,27.7065,24.677096015625Q27.761200000000002,24.758988015625,27.7989,24.849983015625Q27.8366,24.940977015625,27.855800000000002,25.037576015625Q27.875,25.134174615625,27.875,25.232666015625Q27.875,25.331157415625,27.855800000000002,25.427756015625Q27.8366,25.524355015625,27.7989,25.615349015625Q27.761200000000002,25.706344015625,27.7065,25.788236015625Q27.651699999999998,25.870129015625,27.5821,25.939773015625Q27.5125,26.009417015625,27.4306,26.064136015625Q27.3487,26.118854015625,27.2577,26.156545015625Q27.1667,26.194236015625002,27.0701,26.213451015625Q26.9735,26.232666015625,26.875,26.232666015625L16.125,26.232666015625Q16.0265086,26.232666015625,15.92991,26.213451015625Q15.833311,26.194236015625002,15.742317,26.156545015625Q15.651322,26.118854015625,15.56943,26.064136015625Q15.487537,26.009417015625,15.417893,25.939773015625Q15.348249,25.870129015625,15.29353,25.788236015625Q15.238812,25.706344015625,15.201121,25.615349015625Q15.16343,25.524355015625,15.144214999999999,25.427756015625Q15.125,25.331157415625,15.125,25.232666015625Q15.125,25.134174615625,15.144214999999999,25.037576015625Q15.16343,24.940977015625,15.201121,24.849983015625Q15.238812,24.758988015625,15.29353,24.677096015625Q15.348249,24.595203015625,15.417893,24.525559015625Q15.487537,24.455915015625,15.56943,24.401196015625Q15.651322,24.346478015625,15.742317,24.308787015625Q15.833311,24.271096015624998,15.92991,24.251881015625Q16.0265086,24.232666015625,16.125,24.232666015625Z" fill-rule="evenodd" fill="#FFFFFF" fill-opacity="1"/></g><g><path d="M20.5,19.708343505859375Q20.5,19.609852105859375,20.519215,19.513253505859375Q20.538429999999998,19.416654505859373,20.576121,19.325660505859375Q20.613812,19.234665505859375,20.66853,19.152773505859376Q20.723249,19.070880505859375,20.792893,19.001236505859374Q20.862537,18.931592505859374,20.94443,18.876873505859376Q21.026322,18.822155505859374,21.117317,18.784464505859376Q21.208311,18.746773505859373,21.30491,18.727558505859374Q21.4015086,18.708343505859375,21.5,18.708343505859375Q21.5984914,18.708343505859375,21.69509,18.727558505859374Q21.791689,18.746773505859373,21.882683,18.784464505859376Q21.973678,18.822155505859374,22.05557,18.876873505859376Q22.137463,18.931592505859374,22.207107,19.001236505859374Q22.276751,19.070880505859375,22.33147,19.152773505859376Q22.386188,19.234665505859375,22.423879,19.325660505859375Q22.461570000000002,19.416654505859373,22.480785,19.513253505859375Q22.5,19.609852105859375,22.5,19.708343505859375L22.5,30.458343505859375Q22.5,30.556843505859376,22.480785,30.653443505859375Q22.461570000000002,30.750043505859374,22.423879,30.841043505859375Q22.386188,30.932043505859376,22.33147,31.013943505859373Q22.276751,31.095843505859374,22.207107,31.165443505859376Q22.137463,31.235043505859373,22.05557,31.289843505859373Q21.973678,31.344543505859377,21.882683,31.382243505859375Q21.791689,31.419943505859376,21.69509,31.439143505859377Q21.5984914,31.458343505859375,21.5,31.458343505859375Q21.4015086,31.458343505859375,21.30491,31.439143505859377Q21.208311,31.419943505859376,21.117317,31.382243505859375Q21.026322,31.344543505859377,20.94443,31.289843505859373Q20.862537,31.235043505859373,20.792893,31.165443505859376Q20.723249,31.095843505859374,20.66853,31.013943505859373Q20.613812,30.932043505859376,20.576121,30.841043505859375Q20.538429999999998,30.750043505859374,20.519215,30.653443505859375Q20.5,30.556843505859376,20.5,30.458343505859375L20.5,19.708343505859375Z" fill-rule="evenodd" fill="#FFFFFF" fill-opacity="1"/></g></g></svg>
                    <div class="ml10">
                        <div class="couponName">
                            1000满减100
                        
                        </div>
                        <div class="couponExplain">
                            仅限于上海世博会期间预订酒店
                        </div>
                    </div>
                </div>
                <div class="couponTime mt10 colorCCC">
                    有效期至2024-03-30 00：00：0021
                </div>
            </div>
            <div class="couponDetail">
                <div class="mb10">
                    <span class="bold ">活动时间：</span>即日起至2024年底。
                </div>
                <div>
                    <span class="bold">优惠内容：</span>凡在结账时消费满1000元人民币，即可享受立减100元人民币的优惠。
                </div>
            </div>
        </div>
       
    </div>
</template>
<script lang="ts" setup>
    import Header from '@/components/Header.vue'
    import titleBar from '@/components/titleBar.vue'
    import { ref } from 'vue'
    import type { TabsPaneContext } from 'element-plus'

    const activeName = ref('first')

    const handleClick = (tab: TabsPaneContext, event: Event) => {
        console.log(tab, event)
    }

</script>

<style lang="scss" scoped>
    @import '@/assets/variables.scss';

    .myCoupon {
        max-width: $border-primary-max-width;
        margin: 0 auto;

        .cotent{
            display: flex;
            width: 100%;
            align-items: center;
            justify-content: center;
            flex-direction: column;
            }
            .coupon-item {
                color: #fff;
                width: 800px;
                border-radius: 10px;
                padding: 20px;
                background-color: #356CEB;

                
            }
            .couponDetail{
                width: 800px;
                padding: 20px 60px;
                background-color: #EDF3FD;
                border-radius: 0 0 10px 10px;
            }

    }
    .myCoupon-phone {
        max-width: $border-primary-max-width;
        margin: 0 auto;
        .cotent{
            display: flex;
            width: 100%;
            align-items: center;
            justify-content: center;
            flex-direction: column;
            }
            .coupon-item {
                color: #fff;
                width: 90%;
                border-radius: 10px;
                padding: 20px;
                background-color: #356CEB;
                .couponName-container{
                    display: flex;
                }
                
            }
            .couponDetail{
                width: 90%;
                padding: 20px 30px;
                background-color: #EDF3FD;
                border-radius: 0 0 10px 10px;
            }

    }
</style>